<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Excel-like Online Editor</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
</head>
<body>
<div id="hot" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left:0px;top:0px;"></div>

<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script>
    // 修改为Handsontable初始化
    const container = document.getElementById('hot');
    const hot = new Handsontable(container, {
        data: [['示例数据']],
        rowHeaders: true,
        colHeaders: true,
        height: '100%',
        licenseKey: 'non-commercial-and-evaluation',
        contextMenu: true,
        toolbar: {
            items: {
                print: {
                    name: 'print',
                    callback: () => showPrintPreview(hot.getData()),
                    className: 'custom-print-btn'
                }
            }
        }
    });

    // 修改打印按钮逻辑
    function showPrintPreview(data) {
        // 实现打印预览逻辑（示例）
        console.log('打印数据:', data);
        window.print();
    }
</script>
<style>
/* 修改工具栏样式适配Handsontable */
.custom-print-btn::after {
    content: '🖨️';
    padding: 8px;
    cursor: pointer;
}
</style>
</body>
</html>